<template>
  <div class="order_box">
    <van-nav-bar title="选择主营产品" @click-left="$router.go(-1)">
      <template #left>
        <van-icon class="back_icon" name="arrow-left" />
      </template>
    </van-nav-bar>
    <div class="shop_cart_box">
      <div class="shop_cart_contant">
        <div class="shop_box">
          <div class="form_ietm">
            <div>主花</div>
            <div class="place">{{seleCatoryName ? seleCatoryName : '温馨提示：点击选择'}}</div>
          </div>
          <div class="form_ietm pad">
            <div
              @click="selectMain(item.id)"
              :class="selectId == item.id ? 'form_sele isSelect' : 'form_sele'"
              v-for="(item, i) in catorys"
              :key="i"
            >{{item.categoryName}}</div>
          </div>
        </div>
        <div class="shop_box">
          <div class="form_ietm">
            <div>配花</div>
            <div class="place">温馨提示：点击选择</div>
          </div>
          <div class="form_ietm pad">
            <div
              @click="selectChildrenIds.push(item.id)"
              :class="selectChildrenIds.includes(item.id)  ? 'form_sele isSelect' : 'form_sele'"
              v-for="(item, i) in catoryChildren"
              :key="i"
            >{{item.categoryName}}</div>
          </div>
        </div>

        <div>
          <div class="next_action" @click="nextForm">确定</div>
          <!-- <van-button round block type="primary" native-type="submit">下一步</van-button> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { shoppingService } from "@/api";

export default {
  data() {
    return {
      catoryChildren: [],
      catorys: [],
      selectId: "",
      selectChildrenIds: []
    };
  },

  computed: {
    seleCatoryName() {
      const catoryItem = this.catorys.filter(
        item => item.id == this.selectId
      )[0];
      return catoryItem ? catoryItem.categoryName : "";
    },

    seleCatoryChildrenName() {
      const catoryItem = this.catoryChildren.filter(item =>
        this.selectChildrenIds.includes(item.id)
      );
      return catoryItem;
    }
  },

  watch: {
    selectChildrenIds (val) {
        console.log(val)
      this.$store.commit("ShopSettleIn/setSettleData", {...this.$store.state.ShopSettleIn.settleFormData, mainProductType: {}});
    }
  },

  created() {
    this.getCatory();
  },

  methods: {
    // 获取分类
    async getCatory(id = 0) {
      const { data } = await shoppingService.getCatory(id);
      this.catorys = data;
    },

    // 一级分类选择
    async selectMain(id) {
      const { data } = await shoppingService.getCatory(id);
      this.catoryChildren = data;
      this.selectId = id;
      console.log(this.selectId);
    },

    nextForm() {
    //   this.$router.push("/authForm2");
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.isSelect {
  background: rgba(0, 198, 87, 1);
  border-radius: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.pad {
  padding-top: 16px;

  border: none !important;
}
.form_sele {
  border: 1px solid rgba(238, 238, 248, 1);
  border-radius: 16px;
  padding: 10px;
  margin-right: m-w(26);
  margin-top: 5px;
  font-size: m-w(24); 
}
.form_ietm {
  padding: 10px;
  width: 100%;
  border-bottom: 1px solid #eeeef8;
  color: #323233;
  font-size: m-w(28);
  @extend .flex;
  .place {
    font-size: m-w(28);
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(169, 174, 192, 1);
    margin-right: 10px;
  }
}
.uploader {
  margin-top: 20px;
}
.img_1_b {
  margin-top: 20px;
  padding: 0 m-w(30);
  img {
    width: 100%;
    height: 189px;
  }
  div {
    padding: 7px m-w(28);
    font-size: m-w(24);
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 98, 0, 1);
    background: rgba(255, 240, 230, 1);
  }
}
.car_id {
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}
.next_action {
  width: 100%;
  margin-top: 22px;
  height: 45px;
  background: rgba(0, 198, 87, 1);
  border-radius: 5px;
  font-size: m-w(32);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(254, 255, 254, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.emtoy_box {
  width: 100%;
  height: 10px;
  background: #f7f9fc;
}

.dele {
  background: #00c657 !important;
  border: none !important;
  color: #ffffff !important;
}
.edit {
  border-color: #ff6200 !important;
  color: #ff6200 !important;
}
.baseOpear {
  width: m-w(210);
  height: 35px;
  border: 1px solid rgba(0, 198, 87, 1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 198, 87, 1);
}

.or_d {
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 198, 87, 1);
}
.act_box {
  margin-top: 20px;
  width: 100%;
  height: 45px;
  background: #00c658;
  border-radius: 5px;
  font-size: m-w(32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(254, 255, 255, 1);
}
.des_or {
  margin-top: 21px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(170, 174, 192, 1);
}
.photp {
  padding: 20px m-w(20);
  margin-top: 21px;
  background: white;
  border-radius: 10px;
}
.da_2 {
  font-size: m-w(20);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 98, 0, 1);
}
.da_1 {
  span {
    font-size: m-w(36);
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(255, 98, 0, 1);
  }
  font-size: m-w(28);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(52, 52, 52, 1);
}
.freight_flex {
  @extend .flex;
  margin-top: 20px;
}
.input_box {
  margin-top: 10px;
  input {
    text-align: right;
  }
}
.g_1 {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
}
.order_num {
  margin-top: 21px;
  margin-bottom: 15px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(170, 174, 192, 1);
  @extend .flex;
}
.shop_box {
  background: rgba(255, 255, 255, 1);
  border-radius: m-w(10);
  padding: 15px m-w(20);
  margin-top: 10px;
}
.shop_cart_box {
  width: 100%;
  .shop_cart_contant {
    padding: 10px;
  }
}
.order_box {
  width: 100%;
  min-height: 100vh;

  background: #f7f9fc;
}
.back_icon {
  color: #343434;
  font-size: 20px;
}
</style>
